<template>
	<view class="task-reports">
		<view class="tr-info">
			<view class="info">
				<image class="head" src="/static/u68.png" mode="aspectFill"></image>
				<text class="name">陈佳琪</text>
			</view>
			<view class="rrxx">
				<image class="icon" src="/static/stu/myzx.png" mode="aspectFill"></image>
				<text>冉冉新星</text>
			</view>
		</view>
		<view class="data">
			<view class="d-item">
				<view class="number"><text>365</text>天</view>
				<text>累计学习</text>
			</view>
			<view class="d-item">
				<view class="number"><text>365</text>个</view>
				<text>累计任务</text>
			</view>
			<view class="d-item">
				<view class="number"><text>365</text>次</view>
				<text>累计推荐</text>
			</view>
		</view>
		<view class="related">
			<view class="time">
				2021.12.21-2022.12.21，感谢TA们的不离不弃
			</view>
			<view class="rd-item" v-for="(item, i) in 4" :key="i">
				<view class="image">
					<image src="/static/u68.png" mode="aspectFill"></image>
				</view>
				<view class="name">
					<view>我的重要他人</view>
					<text>武亦妹</text>
				</view>
			</view>
		</view>
		<view class="tips">
			恭喜完成阶段性任务，请再攀高峰~
		</view>
		<view class="xd-btn-text" @click="editTask()">
			重设任务
		</view>
	</view>
</template>
<script>
export default {
    data() {
        return {
			
        }   
    },
	onLoad() {
		
	},
    methods: {
		editTask(){
			uni.navigateTo({
				url: '/pages/student/create-example?overdue=1'
			})
		}
    }
}
</script>
<style lang="less">
	.task-reports{
		padding: 32rpx 40rpx;
		.tr-info{
			display: flex;
			padding: 0 32rpx;
			align-items: center;
			justify-content: space-between;
			.name{
				font-size: 36rpx;
			}
			image{
				vertical-align: middle;
				margin-right: 24rpx;
			}
			.head{
				width: 112rpx;
				height: 112rpx;
				border-radius: 56rpx;
				
			}
			.icon {
				width: 56rpx;
				height: 56rpx;
			}
			.rrxx{
				font-weight: 700;
			}
		}
		
		.data{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx 32rpx;
			border-bottom: 2rpx solid #f2f2f2;
			text-align: center;
			.number{
				text{
					font-weight: 700;
					font-size: 36rpx;
					margin-right: 16rpx;
				}
				margin-bottom: 20rpx;
			}
		}
		.related{
			margin-top: 40rpx;
			text-align: center;
			
			.rd-item{
				margin-top: 32rpx;
				display: inline-block;
				width: 50%;
			}
			.image{
				display: inline-block;
				width: 152rpx;
				height: 152rpx;
				border-radius: 76rpx;
				background-color: #55acee;
				box-shadow:0px 0px 20rpx 2rpx rgba(0, 0, 0, 0.35);
				image{
					margin: 20rpx;
					width: 112rpx;
					height: 112rpx;
					border-radius: 56rpx;
				}
			}
			.name{
				margin-top: 16rpx;
			}
		}
		.tips{
			margin-top: 60rpx;
			text-align: center;
			font-size: 36rpx;
		}
		.xd-btn-text{
			margin-top: 60rpx;
			display: block;
			width: 100%;
			text-align: center;
		}
	}
</style>